<template>
    <div>
        <h3>child</h3>
        <div>
            <input type="text" ref="input_ref" /> 点击按钮自动获取光标
            <p>{{ aaa }}</p>
            <p>{{ bbb }}</p>
            <p>{{ ccc }}</p>
            <button @click="funChange">change</button>
        </div>
    </div>
</template>

<script lang="">
import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
    setup(props, context) {
        let data_default = reactive({
            input_ref: '',
            aaa: 1111,
            bbb: 2222,
            ccc: {
                c1: "c1111",
                c2: "c2222",
                c3: {
                    c31: "c3-1",
                    c32: "c3-2",
                },
            },
        });
        let data1 = toRefs(data_default);
        function funChange() {
            data1.aaa.value = 222;
            data1.bbb.value = 333;
            data1.ccc.value = {
                c1: "c3333",
                c2: "c4444",
                c3: {
                    c31: "c3-1-33333",
                    c32: "c3-2-444444",
                },
            };
            data1.input_ref && data1.input_ref.value.focus();
        }
        return {
            ...data1,
            funChange,
        };
    },
});
</script>
